<template>
<van-popup class="welfare-product-list" position="right" :overlay="false" v-model="showWelfareProductList">
  <van-nav-bar title="福利" left-arrow @click-left="closeWelfareProductList" @click-right="openSearch" left-text="返回">
    <van-icon name="search" slot="right" />
  </van-nav-bar>
  <div class="logo">

  </div>
  <div class="pro-list">
    <div class="van-card" v-for="(i,index) in 10" :key="index">
      <div class="van-card__thumb"><img src="https://m.360buyimg.com/n12/jfs/t6214/49/368477431/462778/ead8e3db/593e0a7aN037e4adf.jpg!q70.jpg" class="van-card__img"></div>
      <div class="van-card__content">
        <div class="van-card__row">
          <div class="van-card__title">剑南春 水晶剑 52度 单瓶装白酒 500ml 口感浓香型</div>
        </div>
        <div class="van-card__row">
          <div class="cash">10000币</div>
          <div class="desc">市场参考价:17000.00元</div>
        </div>
      </div>
      <div class="van-card__footer">
        <div><button class="van-button van-button--default van-button--mini"><span class="van-button__text">马上抢</span></button></div>
      </div>
    </div>
  </div>
</van-popup>
</template>

<script>
export default {
  props: ['showWelfareProductList'],
  methods: {
    closeWelfareProductList() {
      this.$emit('closeWelfareProductList');
    },
    openSearch() {
      this.$router.push({
        path: '/search'
      })
    }
  }
}
</script>

<style lang="scss">
@import '../../assets/styles/common.scss';
.welfare-product-list {
    background-color: #fff;
    width: 100%;
    height: 100%;
    background-color: #f2f2f2;
    overflow-y: scroll;
    .logo {
        height: px2rem(200px);
        width: 100%;
        background-image: url("/static/images/shop/bg-6.png");
        background-size: cover;
        background-repeat: no-repeat;
    }
    > .pro-list {
        padding: px2rem(10px) 0;
        .cash {
            font-size: 15px;
            line-height: 20px;
            display: flex;
            flex-direction: row;
            -webkit-align-items: center;
            align-items: center;
            color: #999127;
        }
        .desc {
            font-size: 12px;
            color: #b4b4b4;
        }
        .ykb {
            @include font-dpr(14px);
            display: flex;
            flex-direction: row;
            -webkit-align-items: center;
            align-items: center;
            color: #dec649;
        }
    }
    .van-card__row {
        display: block;
        margin: px2rem(10px) 0;
        line-height: px2rem(30px);
    }
    .van-card {
        height: px2rem(180px);
        padding: 5px 5px 5px 115px;
    }
    .van-button {
        background-color: #da3142;
        color: #fff;
        border-radius: px2rem(60px);
    }
    .van-card__footer {
        bottom: px2rem(30px);
    }
}
</style>
